<template>
  <view class="page">
  	<view class="top">
  		<image src="@/static/topbg.png" mode="widthFix" class="topbg"></image>
  		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
  			 <!-- 切换语言 -->
		     <view class="navbar-lan">
				 <custom-picker
				       :value="lan"
				       :range="translatedArray"
				       :confirm-text="$t('确定')"
				       :cancel-text="$t('取消')"
				       @change="bindPickerChange"
				     >
				       <view class="content">
				       	<image :src="getImg" class="country"></image>
				       	<image src="@/static/right.png" mode="widthFix" class="ico"></image>
				       </view>
				     </custom-picker>
				 <!-- <picker @change="bindPickerChange" :value="index" :range="translatedArray" range-key="name">
				 	<view class="content">
				 		<image :src="getImg" class="country"></image>
				 		<image src="@/static/right.png" mode="widthFix" class="ico"></image>
				 	</view>
				</picker> -->
		      </view>
  			 <view class="navbar-logo">
  			 	<image src="@/static/logo.png" mode="widthFix"></image>
  			 </view>
  			 <view class="navbar-right"> </view>
  		</view>
		<view class="ico">
			<view class="ico-item">
				<image src="@/static/gf.png" mode="widthFix" class="gf"></image>
				<view class="name">{{ $t('光伏') }}</view>
				<view class="num">{{(Number(list[3])/100).toFixed(2)+'V' || '--V'}}</view>
			</view>
			<view class="ico-item" style="align-self: flex-start;margin-top: 35rpx">
				<image src="@/static/lj.png" mode="widthFix" class="lj"></image>
			</view>
			<view class="ico-item">
				<view style="position: relative;">
					<text style="color: #63b916; position: absolute;left: 50%;top: 14rpx; transform: translateX(-50%);font-size: 25rpx;" v-if="String(list[5]) && String(list[4])">{{ ((list[4]*list[5])/10000).toFixed(0) }}W</text>
					<text style="color: #63b916; position: absolute;left: 50%;top: 14rpx; transform: translateX(-50%);font-size: 25rpx;" v-else>--</text>
					<image src="@/static/mppt.png" mode="widthFix" class="mppt"></image>
				</view>
				<view class="name">MPPT</view>
				<view class="num" v-if="String(list[5])">
					{{(Number(list[5])/100).toFixed(2)}}A
				</view>
				<view v-else>--</view>
			</view>
			<view class="ico-item" style="align-self: flex-start;margin-top: 35rpx; padding-left: 20px;box-sizing: border-box;flex: 0.8;">
				<image src="@/static/lj.png" mode="widthFix" class="lj"></image>
			</view>
			<view class="ico-item">
				<image src="@/static/dc.png" mode="widthFix" class="dc"></image>
				<view class="name">{{$t('电池')}}</view>
				<view class="num">{{ (Number(list[4])/100).toFixed(2)+'V' || '--V' }}</view>
			</view>
		</view>
  	</view>
    <view class="container">
    	<!-- 设备信息 -->
    	<view class="device">
    		<text class="title">{{$t('设备信息')}}</text>
			<view class="device-close" @click="close">
				<image src="@/static/switch.png" mode="widthFix"></image>
				<text>{{$t('断开')}}</text>
			</view>
    		<image src="@/static/device-top.png" class="title-bg" mode="widthFix"></image>
    		<view class="device-content">
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico1.png" mode="widthFix"></image>
    					<text class="fr">{{$t('工作状态')}}</text>
    				</view>
    				<text class="fr">{{String(list[1])?[$t('停止充电'),$t('最大效率跟踪'),$t('浮充充电')][list[1]]:'--'}}</text>
    			</view>
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico2.png" mode="widthFix"></image>
    					<text>{{$t('日发电量')}}</text>
    				</view>
    				<text v-if="String(list[9])&&String(list[10])">{{((Number(list[9])*65536+Number(list[10]))/1000).toFixed(3)}}kwh</text>
					<text v-else>--</text>
    			</view>
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico3.png" mode="widthFix"></image>
    					<text>{{$t('总发电量')}}</text>
    				</view>
					<text v-if="String(list[11])&&String(list[12])">{{((Number(list[11])*65536+Number(list[12]))/1000).toFixed(3)}}kwh</text>
					<text v-else>--</text>
    			</view>
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico4.png" mode="widthFix"></image>
    					<text>{{$t('碳排放量')}}</text>
    				</view>
    				<text v-if="String(list[11])&&String(list[12])">{{(((Number(list[11])*65536+Number(list[12]))/1000) * 0.785).toFixed(3)}}kg</text>
					<text v-else>--</text>
    			</view>
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico5.png" mode="widthFix"></image>
    					<text>{{$t('内部温度')}}</text>
    				</view>
    				<text v-if="String(list[6])">{{ (Number(list[6])/10).toFixed(1)+'°C' }}</text>
					<text v-else>--°C</text>
    			</view>
    			<view class="device-content-item">
    				<view class="device-content-item-left">
    					<image src="@/static/ico6.png" mode="widthFix"></image>
    					<text>{{$t('外部温度')}}</text>
    				</view>
    				<text v-if="String(list[8])">{{ (Number(list[8])/10).toFixed(1)+'°C' }}</text>
					<text v-else>--°C</text>
    			</view>
    		</view>
    	</view>
    	<!-- 运行参数 -->
    	<view class="parameter">
    		<view class="title">{{$t('运行参数')}}</view>
    		<view class="parameter-item">
    			<text>{{$t('额定电压')}}</text>
    			<text>{{ String(list[34])?[$t('自动识别'),'12V','24V','36V','48V','60V','72V','84V','96V'][list[34]]:'--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('电池种类')}}</text>
    			<text>{{ String(list[33])?[$t('铅酸免维护'),$t('铅酸胶体'),$t('铅酸液体'),$t('锂电')][list[33]]: '--' }}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('直流输出')}}</text>
    			<text v-if="String(list[45])">{{[$t('关闭'),$t('自动/有电就输出'),$t('时控开/关'),$t('光控'),$t('远程控制')][list[45]]}}</text>
				<text v-else>--</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('均充电压上限')}}</text>
    			<text>{{(Number(list[36])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('浮充电压上限')}}</text>
    			<text>{{(Number(list[37])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('电池过压保护电压')}}</text>
    			<text>{{(Number(list[38])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('电池过压恢复电压')}}</text>
    			<text>{{(Number(list[39])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('电池过放保护电压')}}</text>
    			<text>{{(Number(list[40])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('电池过放恢复电压')}}</text>
    			<text>{{(Number(list[41])/100).toFixed(2)+'V' || '--V'}}</text>
    		</view>
    		<view class="parameter-item">
    			<text>{{$t('充电电流上限')}}</text>
    			<text>{{(Number(list[43])/100).toFixed(2)+'A' || '--A'}}</text>
    		</view>
    	</view>
    	<!-- 运行状态 -->
    	<view class="parameter">
    		<view class="title">{{$t('运行状态')}}</view>
			<!-- <view class="parameter-item">
				<text>{{$t('运行状态')}}</text>
				<text class="yc">异常</text>
			</view>
			<view class="parameter-item">
				<text>{{$t('电池状态')}}</text>
				<text class="zc">正常</text>
			</view> -->
			<view class="parameter-item" v-for="(item,index) in [$t('运行状态'),$t('电池状态'),$t('风扇状态'),$t('温度状态'),$t('直流输出'),$t('内部温度'),$t('外部温度')]" :key="index">
				<text>{{$t(item)}}</text>
				<text v-if="String(list[0])" :class="[Number(Number(list[0]).toString(2).padStart(16, '0').split('').reverse()[index])>0?'yc':'zc']">
				<!-- {{Number(Number(4).toString(2).padStart(7, '0').split('').reverse()[index])>0?['运行异常','电池过放','风扇故障', '过温','DC输出短路','内部温度故障','外部温度故障'][index]:'正常'}} --> 
					{{ Number(Number(list[0]).toString(2).padStart(16, '0').split('').reverse()[index])>0?[$t('运行异常'),$t('电池过放'),$t('风扇故障'), $t('过温'),$t('DC输出短路'),$t('内部温度故障'),$t('外部温度故障')][index]:$t('正常') }}
				</text>
				<text v-else class="zc">--</text>
			</view> 
			
    	<!-- 	
    		<view class="parameter-item">
    			<text>{{$t('外部温度')}}</text>
    			<text v-if="String(list[6])" :class="[Number(list[6]).toString(2).padStart(16, '0').split('').reverse()[6]>0?'yc':'zc']">{{Number(list[6]).toString(2).padStart(16, '0').split('').reverse()[6] == 0?'正常':['运行异常','电池过放','风扇故障', '过温','DC输出短路','内部温度故障','外部温度故障'][list[6]]}}</text>
    			<text class="zc" v-else>--</text>
    		</view> -->
    	</view>
    </view>
  </view>
</template>

<script>
	import { mapState } from "vuex"
	import CustomPicker from '@/components/CustomPicker.vue';
	export default {
		components: {
		   CustomPicker
		 },
		computed: {
			...mapState(['list']),
			// 动态翻译的 array 数据
			translatedArray() {
			  return [
				{ name: this.$t('languages[0].name'), value: 'zh' }, 
				{ name: this.$t('languages[1].name'), value: 'en' }, 
				{ name: this.$t('languages[2].name'), value: 'jp' }
			  ];
			},
			getImg(){
				return  `/static/${this.lan}.png`
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				index: 0,
				lan:'zh',
				// imagePath:''
			}
		},
		created() {
		    const systemInfo = uni.getSystemInfoSync();
		    const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
		    if (systemInfo.platform === 'android') {
		      this.navBarHeight = statusBarHeight + 48; // Android 导航栏高度
		    } else {
		      this.navBarHeight = statusBarHeight + 44; // iOS 导航栏高度
		    }
			const savedLanguage = uni.getStorageSync('language'); // 获取存储的语言
			  if (savedLanguage) {
			    this.lan = savedLanguage; // 设置语言
			    this.$i18n.locale = this.lan; // 根据存储的语言设置应用的语言
			  }
		  },
		methods: {
			bindPickerChange(e) {
				// console.log(e,'eee')
				// this.index = e.detail.value;
				this.lan = this.translatedArray[e].value
				this.$i18n.locale = this.lan;
				uni.setStorageSync('language', this.lan); // 保存选择的语言
			},
			parseDateFromInt(value,arg1,arg2) {
			    const hexValue = value.toString(16).padStart(4, '0');
			    const highByte = parseInt(hexValue.slice(0, 2), 16);  
			    const year = 2000 + highByte; 
			    const lowByte = parseInt(hexValue.slice(2, 4), 16); 
			    const month = lowByte;
			    return `${year+arg1+month+arg2}`;
			},
			parseDayHourFromInt(value,arg1,arg2) {
			    const day = (value >> 8) & 0xFF; 
			    const hour = value & 0xFF; 
			    return `${day+arg1+hour+arg2}`;
			},
			close(){
				uni.closeBLEConnection({
					deviceId: this.$store.state.currentDevice.deviceId,
					fail: () => uni.navigateTo({
						url: "/pages/search/index"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding-bottom: 50rpx;
	// background: #e7f5f3;
	// background: rgba(45, 57, 56, 65%);
}
.container{
	padding: 0 20rpx;
}
.top{
	position: relative;
	z-index: 1;
	// background-color: #d9efed;
	
	padding-top: 60rpx;
	.topbg{
		position: absolute;
		top: 0;
		left:0;
		width: 100%;
		z-index: -1;
	}
	.navbar{
		display: flex;
		align-items: center;
		justify-content: center;
		&-right{
			width: 100px;
		}
		&-lan{
			width: 100px;
			padding-left: 20rpx;
			.content{
				width: 80rpx;
				border: 1px solid #ded7d7;
				display: flex;
				align-items: center;
				border-radius: 100rpx;
				justify-content: space-between;
				padding: 5rpx;
				box-sizing: border-box;
			}
		    .country{
				width: 32rpx;
				height: 32rpx;
				border-radius: 100%;
				flex-shrink: 0;
			}
			.ico{
				width: 30rpx;
				height: 30rpx;
			}
		}
		&-logo{
			flex: 1;
			text-align: center;
			image{
				width: 160rpx;
			}
		
		}
	}
	.ico{
		display: flex;
		align-items: center;
		&-item{
			flex: 1;
			text-align: center;
			.gf{
				width: 84rpx;
			}
			.lj{
				width: 38rpx;
			}
			.mppt{
				width: 130rpx;
			}
			.dc{
				width: 94rpx;
			}
			.name{
				font-size: 28rpx;
			}
			.num{
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}
	.icoText{
		display: flex;
		align-items: center;
		.text-item{
			flex: 1;
			text-align: center;
		}
		.text-item:nth-child(1){
			text-align: left;
		}
	}
}
.device{
	background: #BBF1EB;
	margin-top: 30rpx;
	border-radius: 10px;
	position: relative;
	padding: 10rpx;
	&-close{
		position: absolute;
		background: #fff;
		// width:120rpx;
		height: 50rpx;
		border-radius: 20px;
		box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;
		right: 20rpx;
		
		image{
			width: 40rpx;
			height: 40rpx;
		}
		text{
			font-size: 28rpx;
			color: #FF4D4F;
			margin-left: 4rpx;
		}
	}
	.title{
		font-size: 40rpx;
		font-weight: 700;
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		color: #123054;
	}
	.title-bg{
		width: 100%;
		margin-top: 50rpx;
	}
	&-content{
		background: #fff;
		width: 100%;
		margin-top: -60rpx;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding: 0 0 10rpx;
		&-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			
			.fr{
				color: #000;
				font-weight: 700;
			}
			
			&-left{
				display: flex;
				align-items: center;
				color: rgba(45, 57, 56, 65%);
				image{
					width: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
}
.parameter{
	margin-top: 30rpx;
	border-radius: 10px;
	position: relative;
	padding: 10rpx;
	box-shadow: inset 0 23px 43px 0 rgba(217, 251, 247, 3%);
	.title{
		font-size: 40rpx;
		font-weight: 700;
		color: #123054;
		padding: 20rpx 20rpx 40rpx;
	}
	&-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		text:nth-child(1){
			color: rgba(45, 57, 56, 65%);
		}
		.zc{
			color: #9DD02D;
		}
		.yc{
			color: #E53D23;
		}
	}
}

</style>
